<script lang="tsx">
import { defineComponent, computed, ref } from "vue"
import props from "./props.ts"
import ChenIcon from "@/components/Icon/icon.vue"

export default defineComponent({
	name: "ChenDialog",
	props,
	setup(props, { emit, slots }) {
		const visibleCom = computed({
			get: () => {
				if (props.visible === true) {
					innerRef.value!.classList.add("animate__fadeIn")
				}
				return props.visible
			},
			set(val) {
				if (val === false) props.onClose && props.onClose()
				emit("update:visible", val)
			},
		})
		// ref
		const dialogRef = ref<HTMLDivElement | null>(null)
		const innerRef = ref<HTMLDivElement | null>(null)
		const realHeight = computed(() => {
			const viewPortHeight = window.innerHeight
			const viewPortWidth = window.innerWidth
			// 计算高度的一半
			const halfHeight = innerRef.value ? innerRef.value.clientHeight / 2 : 0
			// 判断是否是vw或vh
			let parseNumber: any = props.top
			if (parseNumber && parseNumber.includes("vw")) {
				parseNumber = (parseNumber.replace("vw", "") / 100) * viewPortWidth
			} else if (parseNumber && parseNumber.includes("vh")) {
				parseNumber = (parseNumber.replace("vh", "") / 100) * viewPortHeight
			} else {
				parseNumber = +parseNumber.replace("px", "")
			}
			return parseNumber - halfHeight // 注意应该是减去自身高度一半
		})
		const closeTransitionWrapFunc = () => {
			document.startViewTransition(() => {
				visibleCom.value = false
			})
		}
		return () => (
			<div
				class="chen-dialog"
				style={{
					display: visibleCom.value ? "block" : "none",
				}}
				ref={dialogRef}
				onClick={e => {
					if (e.target === dialogRef.value) closeTransitionWrapFunc()
				}}
			>
				<div
					class="inner animate__animated animate__faster"
					ref={innerRef}
					style={{
						width: props.width,
						top: `${realHeight.value}px`,
					}}
				>
					<div class="top">
						<div class="title">{props.title}</div>
						<div class="cancel" onClick={closeTransitionWrapFunc}>
							<ChenIcon icon="xmark"></ChenIcon>
						</div>
					</div>
					<div class="content">{slots.default ? slots.default() : ""}</div>
					{slots.footer ? <div class="footer">{slots.footer()}</div> : null}
				</div>
			</div>
		)
	},
})
</script>

<style lang="less" scoped>
.inner {
	display: flex;
	flex-direction: column;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	background-color: #fff;
	min-width: 50%;
	min-height: fit-content;
	.top {
		width: 100%;
		height: 60px;
		padding: 25px;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid var(--chen-border-color-darker);
		.cancel {
			cursor: pointer;
			width: 20px;
			height: 20px;
			line-height: 20px;
			border: 1px solid;
			padding-top: 2.3px;
			border-radius: 50%;
			transition: all 0.3s;
			&:hover {
				border: 1px solid var(--chen-primary);
				color: #fff;
				background-color: var(--chen-primary);
			}
		}
	}
	.content {
		padding: 20px;
		color: var(--chen-text-color-regular);
	}
	.footer {
		display: flex;
		justify-content: end;
		padding: 10px;
		gap: 20px;
	}
}
</style>
